import React from 'react';
import { Modal, Upload, Icon, Button, Form, message } from 'antd';
import { batchAddStaffUpload, getFailFileDownload } from '@api/organization';
import PropTypes from 'prop-types';
import _ from 'lodash';

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 }
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 }
  }
};

class BatchUploadStaffModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      failedFilename: ''
    };
  }

  static propTypes = {
    loadStaffList: PropTypes.func,
    loadOrganizationCascaderTree: PropTypes.func,
    onClose: PropTypes.func,
    visible: PropTypes.bool
  };

  beforeUpload = file => {
    this.setState({
      fileList: [file]
    });
    return false;
  };

  onRemove = () => {
    this.setState({ fileList: [] });
  };

  uploadFile = () => {
    const { fileList } = this.state;
    const { loadStaffList, loadOrganizationCascaderTree } = this.props;
    if (!fileList || !fileList[0]) {
      return;
    }
    const body = new FormData();
    body.append('file', fileList[0]);
    batchAddStaffUpload(body)
      .then(res => {
        const { fail, failedFilename } = _.get(res, 'data.data', {});
        if (fail && failedFilename) {
          this.setState({ failedFilename });
        } else {
          message.success('批量导入人员成功');
          this.cancelUpload();
          loadStaffList();
          loadOrganizationCascaderTree();
        }
      })
      .catch(e => {
        message.error(e.message === 'Could not find workbook' ? '文件格式错误！' : e.message);
      });
  };

  cancelUpload = () => {
    const { onClose } = this.props;
    this.setState({ fileList: [], failedFilename: '' }, () => onClose());
  };

  renderFailTipComponent = () => {
    const { failedFilename } = this.state;
    return (
      <div>
        <div style={{ marginBottom: '20px' }}>部分人员导入失败, 请您核验填写的信息格式是否正确</div>
        下载添加失败的人员名单: <a onClick={this.downloadFailed}>{failedFilename}xxx.xlsx</a>
      </div>
    );
  };

  downloadFailed = () => {
    const { failedFilename } = this.state;
    if (failedFilename) {
      getFailFileDownload('staff', failedFilename);
    }
  };

  render() {
    const { fileList, failedFilename } = this.state;
    const { visible } = this.props;
    return (
      <Modal
        maskClosable={false}
        visible={visible}
        title="批量添加人员"
        onOk={this.uploadFile}
        onCancel={this.cancelUpload}
      >
        {!failedFilename.length ? (
          <Form {...formItemLayout}>
            <Form.Item label="地址">
              <Upload
                accept=".xlsx"
                fileList={fileList}
                beforeUpload={this.beforeUpload}
                onRemove={this.onRemove}
              >
                <Button>
                  <Icon type="upload" /> 点击上传&ldquo;.xlsx&rdquo;格式文件
                </Button>
              </Upload>
            </Form.Item>
            <Form.Item label="模板">
              <a className="download-example" href="/batch_add_staff_example.xlsx">
                下载模板
              </a>
            </Form.Item>
          </Form>
        ) : (
          this.renderFailTipComponent()
        )}
      </Modal>
    );
  }
}

export default BatchUploadStaffModal;
